<template>
  <el-table-column :="attrs">
    <template #default="{ row }">
      <el-icon v-loading="loading" :class="{ active: row.favoriteStatus, deactive: !row.favoriteStatus }" @click="onChangeFavorite(row)"><StarFilled /></el-icon>
    </template>
  </el-table-column>
</template>

<script setup lang="ts">
import { useAttrs, ref } from 'vue'
import { ElIcon } from 'element-plus'
import { StarFilled } from '@element-plus/icons-vue'
import { changeFavorite } from '../../api'
const attrs = useAttrs()

const loading = ref(false)
const onChangeFavorite = (row) => {
  loading.value = true
  changeFavorite({ consultId: row.consultId, favoriteStatus: row.favoriteStatus ? 0 : 1 })
    .then(() => {
      row.favoriteStatus = row.favoriteStatus ? 0 : 1
    })
    .finally(() => {
      loading.value = false
    })
}
</script>

<style scoped lang="scss">
.active {
  color: #FF5A00;
  cursor: pointer;
}
.deactive {
  color: #E1E1E1;
  cursor: pointer;
}
</style>
